<template>
<view class="entrance-box bg-white">
  <view :style="{ height: iStatusBarHeight + 'px'}"></view>
  <view class="content">
    <view class="logo text-center">
      <view class="img-box shadow shadow-lg bg-white margin-bottom">
        <image src="/static/logo.png" mode="aspectFit"></image>
      </view>
      <text class="text-orange text-xxl text-bold">恐龙租机</text>
    </view>
    <view class="flex flex-direction margin-tb-xl padding">
      <button class="cu-btn dm-btn round bg-orange text-xl" @tap="gotoPage('register')">注册</button>
    </view>
    <view class="flex flex-direction flex-sub margin-tb-xl padding">
      <button class="cu-btn dm-btn round bg-orange text-xl" @tap="gotoPage('login-code')">登录</button>
    </view>
    <view class="close-btn text-xxl" @tap="closePage"><text class="cuIcon-close"></text></view>
  </view>
</view>
</template>

<script>
export default {
  name: 'entrance',
  data () {
    return {
      iStatusBarHeight: 0
    }
  },
  onLoad() {
    this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight
  },
  methods: {
    gotoPage(routeName) {
      this.$Router.push({ name: routeName })
    },
    closePage() {
      this.$Router.back(1)
    }
  }
}
</script>

<style lang="less">
.entrance-box {
  height: 100vh;

  .dm-btn {
    width: 100%;
  }
}

.content {
  position: relative;
  height: 100vh;
  padding-top: 20vh;

  .close-btn {
    position: absolute;
    top: 40rpx;
    left: 40rpx;
  }
}

.logo {
  .img-box {
    width: 210rpx;
    height: 210rpx;
    border: 2rpx solid #eee;
    border-radius: 40rpx;
    overflow: hidden;
    margin: 0 auto 20rpx auto;

    image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
